<template>
  <basic-dialog
    :width="'50%'"
    :visible.sync="visible"
    :title="title"
    :handle-close="handleCloseDialog"
    :handle-opened="handleOpened"
    :handle-ok="handleConfirm"
    :loadingBtn="confirmLoading"
    :okText="'提交'"
  >
    <el-form
      ref="formData"
      :model="formData"
      :rules="formValidate"
      label-width="120px"
    >
      <el-form-item label="供应商代码" prop="supplierCode">
        <el-input
          readonly
          v-model.trim="formData.supplierCode"
          placeholder="请选择供应商代码"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="showSupplierDialog"
          ></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="供应商名称" prop="supplierName">
        <el-input
          readonly
          v-model.trim="formData.supplierName"
          :placeholder="supplierPlaceholder"
        />
      </el-form-item>
      <el-form-item label="供应商分类" prop="supplierClassifyName">
        <el-input
          readonly
          v-model.trim="formData.supplierClassifyName"
          :placeholder="supplierPlaceholder"
        />
      </el-form-item>
      <el-form-item label="供应商类型" prop="supplierTypeName">
        <el-input
          readonly
          v-model.trim="formData.supplierTypeName"
          :placeholder="supplierPlaceholder"
        />
      </el-form-item>
      <el-form-item label="管理区域" prop="managementAreaName">
        <el-input
          readonly
          v-model.trim="formData.managementAreaName"
          :placeholder="supplierPlaceholder"
        />
      </el-form-item>
      <el-form-item label="物流中心" prop="logisticsCenterId">
        <el-select
          v-model.trim="formData.logisticsCenterId"
          placeholder="请选择物流中心"
          filterable
          @change="handleChangeLogisticsCenter"
        >
          <el-option
            v-for="item in logisticsCenterList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="到货起始时间" prop="arrivalTimeStart">
        <el-time-picker
          v-model="formData.arrivalTimeStart"
          :value-format="'HH:mm:ss'"
          :picker-options="{
            selectableRange: '00:00:00 - 23:59:59'
          }"
          placeholder="选择到货起始时间">
        </el-time-picker>
      </el-form-item>
      <el-form-item label="到货截至时间" prop="arrivalTimeEnd">
        <el-time-picker
          v-model="formData.arrivalTimeEnd"
          :value-format="'HH:mm:ss'"
          :picker-options="{
            minTime: formData.arrivalTimeStart
          }"
          placeholder="选择到货截至时间">
        </el-time-picker>
      </el-form-item>
    </el-form>
    <!-- 批量新增到货时间 -->
    <SelectSupplier
      :visible.sync="supplierVisible"
      @getSupplierData="getSupplierData"
    />
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import SelectSupplier from './SelectSupplier';
import { addArrivalTimeService } from '@api/supplier/innerManagement/arrivalTimeManagement';

export default {
  components: {
    BasicDialog,
    SelectSupplier
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    selectData: {
      required: true
    },
    logisticsCenterList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      supplierVisible: false,
      confirmLoading: false,
      supplierPlaceholder: '根据供应商搜索出结果后，自动写入，不可修改',
      formData: {},
      formValidate: {
        supplierCode: [
          { required: true, message: '请选择供应商', trigger: 'change' },
        ],
        logisticsCenterId: [
          { required: true, message: '请选择物流中心', trigger: 'change' },
        ],
        arrivalTimeStart: [
          { required: true, message: '请选择到货起始时间', trigger: 'change' },
        ],
        arrivalTimeEnd: [
          { required: true, message: '请选择到货截至时间', trigger: 'change' },
        ],
      },
    };
  },
  computed: {
    isEdit () {
      return this.selectData
    },
    title () {
      return this.isEdit ? '修改到货时间' : '新建到货时间'
    },
  },
  methods: {
    showSupplierDialog () {
      this.supplierVisible = true;
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$refs.formData.resetFields();
      this.$emit('update:visible', false);
    },
    // 打开弹框
    handleOpened () {
      if (this.isEdit) {
        const {
          id,
          supplierCode,
          supplierName,
          supplierId,
          supplierClassify,
          supplierClassifyName,
          supplierType,
          supplierTypeName,
          managementAreaName,
          managementAreaId,
          logisticsCenter,
          logisticsCenterId,
          arrivalTimeStart,
          arrivalTimeEnd,
        } = this.selectData;
        this.formData = {
          id,
          supplierCode,
          supplierName,
          supplierId,
          supplierClassify,
          supplierClassifyName,
          supplierType,
          supplierTypeName,
          managementAreaName,
          managementAreaId,
          logisticsCenter,
          logisticsCenterId,
          arrivalTimeStart,
          arrivalTimeEnd,
        }
      } else {
        this.formData = {
          supplierCode: '',
          supplierName: '',
          supplierId: '',
          supplierClassify: '',
          supplierClassifyName: '',
          supplierType: '',
          supplierTypeName: '',
          managementAreaName: '',
          managementAreaId: '',
          logisticsCenter: '',
          logisticsCenterId: '',
          arrivalTimeStart: '',
          arrivalTimeEnd: '',
        }
      }
    },
    // 对比时间 时分秒
    compareTime (startTime, endTime) {
      const date = new Date()
      const [startHour, startMinute, startSecond] = startTime.split(':')
      const [endHour, endMinute, endSecond] = endTime.split(':')
      const start = date.setHours(startHour, startMinute, startSecond)
      const end = date.setHours(endHour, endMinute, endSecond)
      return start > end
    },
    handleConfirm () {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          const { arrivalTimeStart, arrivalTimeEnd } = this.formData;
          if (this.compareTime(arrivalTimeStart, arrivalTimeEnd)) {
            return this.$message.warning('到货截至时间不能小于起始时间')
          }
          this.updateArrivalTime(this.formData)
        }
      });
    },
    async updateArrivalTime (param) {
      const res = await addArrivalTimeService(
        param,
        state => { this.confirmLoading = state }
      );
      if (res) {
        this.$message.success('操作成功');
        this.$emit('getTableData');
        this.handleCloseDialog();
      }
    },
    // 获取供应商信息
    getSupplierData (row) {
      const {
        supplierCode,
        supplierName,
        supplierId,
        supplierClassify,
        supplierClassifyName,
        supplierType,
        supplierTypeName,
        managementAreaName,
        managementAreaId,
      } = row;
      this.formData = {
        ...this.formData,
        supplierCode,
        supplierName,
        supplierId,
        supplierClassify,
        supplierClassifyName,
        supplierType,
        supplierTypeName,
        managementAreaName,
        managementAreaId,
      }
    },
    // 物流中西名称赋值
    handleChangeLogisticsCenter (val) {
      this.formData.logisticsCenter = this.logisticsCenterList.find(item => item.value == val).label
    }
  }
};
</script>
<style scoped>
.el-select, .el-date-editor.el-input {
  width: 100%;
}
</style>
